import React, { Component, PropTypes } from 'react';
import { connect } from 'dva';
import { Link } from 'dva/router';
import styles from './IndexPage.less';
import VtxTab from '../components/VortexTabs.js';
import { Select,Button,Table,Icon} from 'antd';
const Option = Select.Option;
let newTabIndex=0;
let timer=0;
function IndexPage({dispatch,vtxTab}) {
  const {tabData,tabIconData,moreTabData,tabPosition,type,activeKey,closeTabData,loading,filterTabData}=vtxTab;
  const VtxTabProps={
    defaultActiveKey:'1',
    data:tabData,
    onChange(key){
        console.log(`当前选中key:${key}`);
    }
  }
  const VtxTabProps1={
    defaultActiveKey:'1',
    data:tabIconData
  }
  const VtxTabProps2={
    defaultActiveKey:'1',
    data:tabData,
    disabledIndex:'2',
    onChange(key){
        console.log(`当前选中key:${key}`);
    }
  }
  const VtxTabProps3={
    defaultActiveKey:'1',
    data:moreTabData,
    tabPosition:tabPosition,
    style:{height:220},
    onChange(key){
        console.log(`当前选中key:${key}`);
    }
  }
  const VtxTabProps4={
    defaultActiveKey:'1',
    activeKey,
    data:tabData,
    type:type,
    onChange(key){
      dispatch({
        type:'vtxTab/fetch',
        payload:{
          activeKey:key 
        }
      })
    },
    onAdd(){
      const activeKey = `newTab${newTabIndex ++}`;
      tabData.push({ title: 'New Tab', content: 'Content of new Tab', key: activeKey });
      dispatch({
        type:'vtxTab/fetch',
        payload:{
          tabData,
          activeKey 
        }
      })
    },
    onRemove(panes, activeKey){
      dispatch({
        type:'vtxTab/fetch',
        payload:{
          tabData:panes,
          activeKey 
        }
      })
    }
  }
  //右侧附加操作
  const onExtraClick=()=>{
    alert('右侧增加附加操作')
  }
  const VtxTabProps5={
    defaultActiveKey:'1',
    data:tabData,
    tabBarExtraContent:<Button onClick={onExtraClick}>Extra Action</Button>,
    onChange(key){
        console.log(`当前选中key:${key}`);
    }
  }
  const VtxTabProps6={
    defaultActiveKey:'1',
    type:'editable-card',
    data:closeTabData,
    onChange(key){
      dispatch({
        type:'vtxTab/fetch',
        payload:{
          activeKey:key 
        }
      })
    },
    onAdd(){
      const activeKey = `newTab${newTabIndex ++}`;
      closeTabData.push({ title: 'New Tab', content: 'Content of new Tab', key: activeKey });
      dispatch({
        type:'vtxTab/fetch',
        payload:{
          closeTabData,
          activeKey 
        }
      })
    },
    onRemove(panes, activeKey){
      dispatch({
        type:'vtxTab/fetch',
        payload:{
          closeTabData:panes,
          activeKey 
        }
      })
    }
  }
  const VtxTabProps7={
    hideAdd:true,
    defaultActiveKey:'1',
    activeKey,
    type:'editable-card',
    data:tabData,
    onChange(key){
      dispatch({
        type:'vtxTab/fetch',
        payload:{
          activeKey:key 
        }
      })
    },
    onRemove(panes, activeKey){
      dispatch({
        type:'vtxTab/fetch',
        payload:{
          tabData:panes,
          activeKey 
        }
      })
    }
  }
  const VtxTabProps8={
      loading,
      defaultActiveKey:'1',
      activeKey,
      data:tabData,
      onChange(key,loading){
        dispatch({
          type:'vtxTab/fetch',
          payload:{
            activeKey:key,
            loading
          }
        })
        if(timer) clearTimeout(timer);
        timer=setTimeout(()=>{
            dispatch({
              type:'vtxTab/fetch',
              payload:{
                loading:false
              }
            })
        },500)
      }
  }
  const columns = [{
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    render: text => <a href="#">{text}</a>,
  }, {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  }, {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  }, {
    title: 'Action',
    key: 'action',
    render: (text, record) => (
      <span>
        <a href="#">Action 一 {record.name}</a>
        <span className="ant-divider" />
        <a href="#">Delete</a>
        <span className="ant-divider" />
        <a href="#" className="ant-dropdown-link">
          More actions <Icon type="down" />
        </a>
      </span>
    ),
  }];
  const data = [{
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  }, {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  }, {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  }];
  const VtxTabProps9={
    defaultActiveKey:'1',
    data:[{
      title:'tab1',
      key:'1',
      content: function(){
          return(
              <Table columns={columns} dataSource={data} pagination={false} />
          );
      }
    },{
      title:'tab2',
      key:'2',
      content:'tab22'
    }],
    onChange(key){
        console.log(`当前选中key:${key}`);
    }
  }
  //改变方位
  const changeTabPosition=(position)=>{
      dispatch({
        type:'vtxTab/fetch',
        payload:{
          tabPosition:position
        }
      })
  }
  //改变样式
  const changeTabType=(type)=>{
      dispatch({
        type:'vtxTab/fetch',
        payload:{
          type:type
        }
      })
  }
  //新增Tab
  const add=()=>{
      const activeKey = `newTab${newTabIndex ++}`;
      tabData.push({ title: 'New Tab', content: 'Content of new Tab', key: activeKey });
      dispatch({
        type:'vtxTab/fetch',
        payload:{
          tabData,
          activeKey 
        }
      })
    }
  return (
    <div className={styles.normal}>
      <ul>
        <li> 
          <p>基本用法，默认选中第一项</p>
          <VtxTab {...VtxTabProps}/>
        </li>
        <li> 
          <p>带Icon的标签。Icon为空时，显示默认图片。</p>
          <VtxTab {...VtxTabProps1}/>
        </li>
        <li> 
          <p>禁用某一项</p>
          <VtxTab {...VtxTabProps2}/>
        </li><li> 
          <p>可以左右、上下滑动，容纳更多标签。</p>
          <div style={{ margin: '16px 0'}}>
            更改tab位置：
            <Select
              value={tabPosition}
              onChange={changeTabPosition}
              dropdownMatchSelectWidth={false}
            >
              <Option value="top">top</Option>
              <Option value="bottom">bottom</Option>
              <Option value="left">left</Option>
              <Option value="right">right</Option>
            </Select>
          </div>
          <VtxTab {...VtxTabProps3}/>
        </li><li> 
          <p>tab样式切换line、card 、editable-card、card-wrap。</p>
          <div style={{ margin: '16px 0'}}>
            更改tab位置：
            <Select
              value={type}
              onChange={changeTabType}
              dropdownMatchSelectWidth={false}
            >
              <Option value="line">line</Option>
              <Option value="card">card</Option>
              <Option value="editable-card">editable-card</Option>
              <Option value="card-wrap">card-wrap</Option>
            </Select>
          </div>
          <VtxTab {...VtxTabProps4}/>
        </li>
        <li> 
          <p>可以在页签右边添加附加操作。</p>
          <VtxTab {...VtxTabProps5}/>
        </li>
        <li> 
          <p>editable-card 样式tab,禁止删除事件,closable为false，则没有删除事件</p>
          <VtxTab {...VtxTabProps6}/>
        </li>
        <li> 
          <p>editable-card 样式tab,隐藏默认add按钮，hideAdd，可自定义</p>
          <div style={{ marginBottom: 16 }}>
              <Button onClick={add}>ADD</Button>
          </div>
          <VtxTab {...VtxTabProps7}/>
        </li>
        <li> 
          <p>tab标签切换loading</p>
          <VtxTab {...VtxTabProps8}/>
        </li>
        <li> 
          <p>tab内容可以是复杂DOM结构或者组件</p>
          <VtxTab {...VtxTabProps9}/>
        </li>
      </ul>
    </div>
  );
}

IndexPage.propTypes = {
};

export default connect(({vtxTab})=>({vtxTab}))(IndexPage);
